body {
  background-color: #000;
  overflow: hidden;
}
.www {
  width: 400px;
  height: 400px;
  border-radius: 400px 0 400px 0;
}
.opacity {
  opacity: 0.5;
}
.bigbox {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 400px;
  height: 400px;
  border-radius: 400px 0 400px 0;
  transform: rotate(-45deg) translateX(-50%);
}
.bigbox div {
  width: 400px;
  height: 400px;
  border-radius: 400px 0 400px 0;
  background-image: linear-gradient(45deg, #fff 2%, #eb6f84 60%);
  transform-origin: left bottom;
  transition: all 1s;
  position: absolute;
  top: 0;
  left: 0;
}
.bigbox:hover .box1 {
  transform: rotate(-90deg);
  opacity: 0.5;
}
.bigbox:hover .box2 {
  transform: rotate(-60deg);
  opacity: 0.5;
}
.bigbox:hover .box3 {
  transform: rotate(-30deg);
  opacity: 0.5;
}
.bigbox:hover .box4 {
  transform: rotate(0deg);
  opacity: 0.5;
}
.bigbox:hover .box5 {
  transform: rotate(30deg);
  opacity: 0.5;
}
.bigbox:hover .box6 {
  transform: rotate(60deg);
  opacity: 0.5;
}
.bigbox:hover .box7 {
  transform: rotate(90deg);
  opacity: 0.5;
}
.bigbox .title {
  height: 50px;
  background-color: red;
  color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  top: 58%;
  left: 33%;
  transform: rotate(45deg) translate(-50%, -50%);
  background-image: none;
  border-radius: 0;
  display: none;
}
